import { Button, Dropdown, Menu, Radio, Space } from 'antd';
import React, { ReactNode, useEffect, useState } from 'react';
import styles from './index.less';

import { CloseOutlined } from '@ant-design/icons';
import { CalciteAction, CalcitePanel } from '@esri/calcite-components-react';

type ICustomModal = {
  title: string;
  children: HTMLHtmlElement | ReactNode | Element;
  onCancel?: () => void;
};

const CustomModal: React.FC<ICustomModal> = (props: ICustomModal) => {
  const { title, children, onCancel } = props;

  return (
    <>
      {/* <div className={styles.panel}>
        <header className={styles.header}>
          <div className={styles['header-content']}>
            <div>
              <h2>{title}</h2>
            </div>
            <div className={styles['header-close']} onClick={onCancel}>
              <CloseOutlined style={{ cursor: 'pointer', fontSize: 20 }} />
            </div>
          </div>
        </header>
        <section className={styles['content-container']}>{children}</section>
      </div> */}

      <CalcitePanel heading={title}>
        <CalciteAction
          icon="x"
          text-enabled
          text=""
          slot="header-actions-end"
          onClick={onCancel}
        />
        <div className={styles['content-container']}>{children}</div>
      </CalcitePanel>
    </>
  );
};

export default CustomModal;
